import { Avatar, Menu, Spin } from 'antd';

import { ClickParam } from 'antd/lib/menu';
import { FormattedMessage, history as router, connect } from 'umi';
import React from 'react';
import UserLogo from '@/assets/user-logo.png';
import { ConnectState } from '@/models/connect';
import { LogoutOutlined } from '@ant-design/icons';

import HeaderDropdown from '../HeaderDropdown';

import styles from './index.less';

export interface GlobalHeaderRightProps {
  menu?: boolean;
  currentUser: object;
  dispatch: any;
}

function AvatarDropdown(props: GlobalHeaderRightProps) {
  const { currentUser, dispatch } = props;

  const onMenuClick = (event: ClickParam) => {
    const { key } = event;

    if (key === 'logout') {
      dispatch({
        type: 'login/logout',
      });
      return;
    }
    router.push(`/user/${key}`);
  };

  // if (!props.menu) {
  //   return (
  //     <span className={`${styles.action} ${styles.account}`}>
  //       <Avatar
  //         size="small"
  //         className={styles.avatar}
  //         src={currentUser.avatar}
  //         alt="avatar"
  //       />
  //       <span className={styles.name}>{currentUser.username}</span>
  //     </span>
  //   );
  // }
  const menuHeaderDropdown = (
    <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
      {/* <Menu.Item key="settings">
        <Icon type="setting" />
        <FormattedMessage id="menu.account.setting" defaultMessage="setting" />
      </Menu.Item> */}
      <Menu.Item key="logout">
        <LogoutOutlined />
        <FormattedMessage id="menu.account.logout" defaultMessage="logout" />
      </Menu.Item>
    </Menu>
  );
  return currentUser && currentUser.username ? (
    <HeaderDropdown overlay={menuHeaderDropdown}>
      <span className={`${styles.action} ${styles.account}`}>
        <Avatar
          size="small"
          className={styles.avatar}
          src={currentUser.avatar || UserLogo}
          alt="avatar"
        />
        <span className={styles.name}>{currentUser.username}</span>
      </span>
    </HeaderDropdown>
  ) : (
    <Spin size="small" style={{ marginLeft: 8, marginRight: 8 }} />
  );
}

export default connect(({ user }: ConnectState) => ({
  currentUser: user.currentUser,
}))(AvatarDropdown);
